<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./CSS/1baa5.css">
</head>

<body>
    <div class=" himalaya-home">
        <!-- 头部 -->
        <header class="himalaya-header">
            <div class="himalaya-xui-header _uH">
                <div class="himalaya-xui-header-inner _uH">
                    <a href="#" class="xui-header-logo _uH">喜马拉雅</a>
                    <nav class="xui-header-nav nav-pos-r _uH">
                        <a href="#" class="nav-tab-link active _uH">
                            <span class="_uH">发现</span>
                        </a>
                        <span class="nav-tab-link-category tab-category _uH">
                            <a href="#" class="nav-tab-link _uH">
                                <span class="_uH">分类</span>
                            </a>
                            <div class="header-nav-category-wrapper _uH">
                                <div class="channel-board gb_">
                                    <a href="#" class="channel-board-item gb_">音乐</a>
                                    <a href="#" class="channel-board-item gb_">有声书</a>
                                    <a href="#" class="channel-board-item gb_">娱乐</a>
                                    <a href="#" class="channel-board-item gb_">外语</a>
                                    <a href="#" class="channel-board-item gb_">儿童</a>
                                    <a href="#" class="channel-board-item gb_">商业财经</a>
                                    <a href="#" class="channel-board-item gb_">历史</a>
                                    <a href="#" class="channel-board-item gb_">相声评书</a>
                                    <a href="#" class="channel-board-item gb_">个人成长</a>
                                    <a href="#" class="channel-board-item gb_">广播剧</a>
                                    <a href="#" class="channel-board-item gb_">有声图书</a>
                                    <a href="#" class="channel-board-item gb_">人文国学</a>
                                    <a href="#" class="channel-board-item gb_">热点</a>
                                    <a href="#" class="channel-board-item gb_">生活</a>
                                    <a href="#" class="channel-board-item gb_">悬疑</a>
                                    <a href="#" class="channel-board-item gb_">健康</a>
                                    <a href="#" class="channel-board-item gb_">汽车</a>
                                </div>
                            </div>
                        </span>
                        <a href="#" class="nav-tab-link _uH">
                            <span class="_uH">电台</span>
                        </a>
                        <div class="nav-header-bottom-active pos-a _uH"></div>
                    </nav>
                    <div class="xui-header-search _uH">
                        <form class="header-search-form focused" autocomplete="off">
                            <input class="header-search-input" placeholder="专辑/声音/主播" autocomplete="new-password"
                                type="text" value>
                            <a href="#">
                                <span class="header-nav-search-button header-nav-search-button_position">
                                    <i class="xuicon xuicon-web_ic_search"></i>
                                </span>
                            </a>
                            <div class="slide-exited">
                                <div class="header-search-suggest">
                                    <ul class="header-search-suggest-list"></ul>
                                    <div>
                                        <ul class="header-search-suggest-list_hot">
                                            <li class="header-search-suggest-title">热门搜索</li>
                                            <li class="header-search-suggest-item">郭德纲相声</li>
                                            <li class="header-search-suggest-item">龙族</li>
                                            <li class="header-search-suggest-item">米小圈上学记</li>
                                            <li class="header-search-suggest-item">刘德华电影</li>
                                            <li class="header-search-suggest-item">陈奕迅歌曲</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                    <div class="xui-header-iconNav _uH">
                        <a href="#" class="header-iconNav-item header-gray _uH">
                            <i class="xuicon xuicon-web_ic_upload_h1 _uH"></i>
                            <p class="title _uH">上传</p>
                        </a>
                        <a href="#" class="header-iconNav-item header-gray _uH">
                            <i class="xuicon xuicon-web_ic_backstage_h1 _uH"></i>
                            <p class="title _uH">创作中心</p>
                        </a>
                        <a href="#" class="header-iconNav-item header-gray _uH">
                            <i class="xuicon xuicon-web_ic_aplus_h1 _uH"></i>
                            <p class="title _uH">有声出版</p>
                        </a>
                        <a href="#" class="header-iconNav-item header-gray _uH">
                            <i class="xuicon xuicon-ic_kehuduan _uH"></i>
                            <p class="title _uH">客户端</p>
                        </a>
                        <div class="header-iconNav-item _uH" style="width: 60px; margin-left: 10px;">
                            <div class="user-notice _XF">
                                <img class="img _XF" src="./images/user.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- 内容 -->
        <main class="himalaya-main">
            <div>
                <div class="banner-wrapper cZ_">
                    <div class="banner-slider cZ_">
                        <div class="xui-slider">
                            <div class="xui-slider-wrap">
                                <i class="left-btn"></i>
                                <i class="right-btn"></i>
                                <ul class="xui-slider-list">
                                    <li class="xui-slider-item xui-slider-item-0 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-0.png" alt="">
                                        </a>
                                    </li>
                                    <li class="xui-slider-item xui-slider-item-1 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-1.png" alt="">
                                        </a>
                                    </li>
                                    <li class="xui-slider-item xui-slider-item-2 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-2.png" alt="">
                                        </a>
                                    </li>
                                    <li class="xui-slider-item xui-slider-item-3 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-3.png" alt="">
                                        </a>
                                    </li>
                                    <li class="xui-slider-item xui-slider-item-4 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-4.png" alt="">
                                        </a>
                                    </li>
                                    <li class="xui-slider-item xui-slider-item-5 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-5.png" alt="">
                                        </a>
                                    </li>
                                    <li class="xui-slider-item xui-slider-item-6 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-6.png" alt="">
                                        </a>
                                    </li>
                                    <li class="xui-slider-item xui-slider-item-7 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-7.png" alt="">
                                        </a>
                                    </li>
                                    <li class="xui-slider-item xui-slider-item-8 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-8.png" alt="">
                                        </a>
                                    </li>
                                    <li class="xui-slider-item xui-slider-item-9 is-anim">
                                        <a href="#">
                                            <img class="pic" src="./images/sider-item-9.png" alt="">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="category-wrap E_h">
                <div class="category h_K">
                    <div class="sub-category h_K">
                        <a href="#" class="entry h_K">
                            <span class="category-icon all h_K"></span>
                            <span>分类</span>
                        </a>
                        <a href="#" class="entry entry-1 i-b h_K">
                            <span class="category-icon rank h_K"></span>
                            <span class="v-m h_K">排行榜</span>
                        </a>
                    </div>
                    <div class="recommend h_K">
                        <div class="main-ca-sub-category Ev_">
                            <h4 class="sub-category-title Ev_">
                                <a href="#">小说</a>
                            </h4>
                            <div class="sub-category-content _VN">
                                <div class="one-line-pills _VN">
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">男频</a>
                                    </span>
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">女频</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-ca-sub-category Ev_">
                            <h4 class="sub-category-title Ev_">
                                <a href="#">相声</a>
                            </h4>
                            <div class="sub-category-content _VN">
                                <div class="one-line-pills _VN">
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">单口</a>
                                    </span>
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">对口</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-ca-sub-category Ev_">
                            <h4 class="sub-category-title Ev_">
                                <a href="#">音乐</a>
                            </h4>
                            <div class="sub-category-content _VN">
                                <div class="one-line-pills _VN">
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">提升</a>
                                    </span>
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">放松</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-ca-sub-category Ev_">
                            <h4 class="sub-category-title Ev_">
                                <a href="#">商业</a>
                            </h4>
                            <div class="sub-category-content _VN">
                                <div class="one-line-pills _VN">
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">投资</a>
                                    </span>
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">经济</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-ca-sub-category Ev_">
                            <h4 class="sub-category-title Ev_">
                                <a href="#">生活</a>
                            </h4>
                            <div class="sub-category-content _VN">
                                <div class="one-line-pills _VN">
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">情感</a>
                                    </span>
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">养生</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-ca-sub-category Ev_">
                            <h4 class="sub-category-title Ev_">
                                <a href="#">儿童</a>
                            </h4>
                            <div class="sub-category-content _VN">
                                <div class="one-line-pills _VN">
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">故事</a>
                                    </span>
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">科普</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-ca-sub-category Ev_">
                            <h4 class="sub-category-title Ev_">
                                <a href="#">外语</a>
                            </h4>
                            <div class="sub-category-content _VN">
                                <div class="one-line-pills _VN">
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">口语</a>
                                    </span>
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">听力</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="main-ca-sub-category Ev_">
                            <h4 class="sub-category-title Ev_">
                                <a href="#">热点</a>
                            </h4>
                            <div class="sub-category-content _VN">
                                <div class="one-line-pills _VN">
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">民生</a>
                                    </span>
                                    <span class="pill _VN">
                                        <a href="#" class="item _VN">国际</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="home-page-content E_h">
                <div class="layout-mian_explore E_h">
                    <div class="guess-like-wrap E_H">
                        <div class="recommend-album-list Af_">
                            <div class="head Af_">
                                <h2 class="title Af_">猜你喜欢</h2>
                            </div>
                            <div class="head-rt Af_">
                                <span class="refresh Af_">
                                    <i class="xuicon xuicon-huanyihuan"></i>
                                    换一批
                                </span>
                            </div>
                        </div>
                        <div class="content Af_">
                            <ul class="Af_">
                                <li class="Af_">
                                    <div class="album-wrapper sm undefined T_G">
                                        <div class="album-wrapper-card T_G">
                                            <a href="#" class="album-cover lg needhover _hW">
                                                <img class="img_hW" src="./uploads/album01.png" alt="">
                                                <div class="album-play-layer I_M">
                                                    <xm-player>
                                                        <div class="svg-wrapper I_M">
                                                            <i class="icon icon-play icon opacity-95 I_M"></i>
                                                        </div>
                                                    </xm-player>
                                                </div>
                                                <p class="listen-count _hW">
                                                    <span class="_hW">
                                                        <i class="icon-earphone icon icon-erji _hW"></i>
                                                        15.20亿
                                                    </span>
                                                </p>
                                                <img class="corner-img _hW" src="./images/vip.png" alt="">
                                            </a>
                                        </div>
                                        <a href="#" class="album-title line-1 lg bold T_G">
                                            <span class="v-m T_G">
                                                庆余年 | 全3季无删改听过瘾 | CV全明星配音 | 作家猫腻点赞 | 同名影视原著小说
                                            </span>
                                        </a>
                                        <a href="#" class="album-author T_G">梁小渔Yilia</a>
                                    </div>
                                </li>
                                <li class="Af_">
                                    <div class="album-wrapper sm undefined T_G">
                                        <div class="album-wrapper-card T_G">
                                            <a href="#" class="album-cover lg needhover _hW">
                                                <img class="img_hW" src="./uploads/album02.png" alt="">
                                                <div class="album-play-layer I_M">
                                                    <xm-player>
                                                        <div class="svg-wrapper I_M">
                                                            <i class="icon icon-play icon opacity-95 I_M"></i>
                                                        </div>
                                                    </xm-player>
                                                </div>
                                                <p class="listen-count _hW">
                                                    <span class="_hW">
                                                        <i class="icon-earphone icon icon-erji _hW"></i>
                                                        667.8万
                                                    </span>
                                                </p>
                                                <img class="corner-img _hW" src="./images/vip.png" alt="">
                                            </a>
                                        </div>
                                        <a href="#" class="album-title line-1 lg bold T_G">
                                            <span class="v-m T_G">
                                                2024德云社欧洲巡演|郭德纲|于谦|海外专场|最新相声演出|持续更新
                                            </span>
                                        </a>
                                        <a href="#" class="album-author T_G">德云社郭德纲相声VIP</a>
                                    </div>
                                </li>
                                <li class="Af_">
                                    <div class="album-wrapper sm undefined T_G">
                                        <div class="album-wrapper-card T_G">
                                            <a href="#" class="album-cover lg needhover _hW">
                                                <img class="img_hW" src="./uploads/album03.png" alt="">
                                                <div class="album-play-layer I_M">
                                                    <xm-player>
                                                        <div class="svg-wrapper I_M">
                                                            <i class="icon icon-play icon opacity-95 I_M"></i>
                                                        </div>
                                                    </xm-player>
                                                </div>
                                                <p class="listen-count _hW">
                                                    <span class="_hW">
                                                        <i class="icon-earphone icon icon-erji _hW"></i>
                                                        17.06亿
                                                    </span>
                                                </p>
                                                <img class="corner-img _hW" src="./images/vip.png" alt="">
                                            </a>
                                        </div>
                                        <a href="#" class="album-title line-1 lg bold T_G">
                                            <span class="v-m T_G">
                                                李哪吒上学记｜稀里糊涂一年级&神神气气二年级
                                            </span>
                                        </a>
                                        <a href="#" class="album-author T_G">东海小学广播站</a>
                                    </div>
                                </li>
                                <li class="Af_">
                                    <div class="album-wrapper sm undefined T_G">
                                        <div class="album-wrapper-card T_G">
                                            <a href="#" class="album-cover lg needhover _hW">
                                                <img class="img_hW" src="./uploads/album04.png" alt="">
                                                <div class="album-play-layer I_M">
                                                    <xm-player>
                                                        <div class="svg-wrapper I_M">
                                                            <i class="icon icon-play icon opacity-95 I_M"></i>
                                                        </div>
                                                    </xm-player>
                                                </div>
                                                <p class="listen-count _hW">
                                                    <span class="_hW">
                                                        <i class="icon-earphone icon icon-erji _hW"></i>
                                                        74.2万
                                                    </span>
                                                </p>
                                                <img class="corner-img _hW" src="./images/vip.png" alt="">
                                            </a>
                                        </div>
                                        <a href="#" class="album-title line-1 lg bold T_G">
                                            <span class="v-m T_G">
                                                三国之关平当老大 | 历史穿越 | 大话三国
                                            </span>
                                        </a>
                                        <a href="#" class="album-author T_G">刘皇书</a>
                                    </div>
                                </li>
                                <li class="Af_">
                                    <div class="album-wrapper sm undefined T_G">
                                        <div class="album-wrapper-card T_G">
                                            <a href="#" class="album-cover lg needhover _hW">
                                                <img class="img_hW" src="./uploads/album05.png" alt="">
                                                <div class="album-play-layer I_M">
                                                    <xm-player>
                                                        <div class="svg-wrapper I_M">
                                                            <i class="icon icon-play icon opacity-95 I_M"></i>
                                                        </div>
                                                    </xm-player>
                                                </div>
                                                <p class="listen-count _hW">
                                                    <span class="_hW">
                                                        <i class="icon-earphone icon icon-erji _hW"></i>
                                                        786万
                                                    </span>
                                                </p>
                                                <img class="corner-img _hW" src="./images/vip.png" alt="">
                                            </a>
                                        </div>
                                        <a href="#" class="album-title line-1 lg bold T_G">
                                            <span class="v-m T_G">
                                                我在认真玩生存游戏丨末世无限流丨欧皇她在生存游戏飒爆了丨多播精品多人有声剧
                                            </span>
                                        </a>
                                        <a href="#" class="album-author T_G">圆在方中_青羽九方</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layout-side_explore E_h"></div>
            </div>
        </main>

        <!-- 底部 -->
        <footer class="himalaya-footer">

        </footer>

    </div>
</body>

</html>